import React, { useEffect, useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import {Card, Table, DatePicker, Row, Col, Input, Button, Select, message} from 'antd'
import { queryRentCount } from '@/services/login'
import {getCountChannelList} from "@/services/channel";
import moment from "moment/moment";
import { exportRent } from '@/services/login'
const { RangePicker } = DatePicker

const Count = () => {
  const [total, setTotal] = useState(0)
  const [pageInfo, setPageInfo] = useState({
    pageNumber: 1,
    pageSize: 10,
    productName:'',//商品名称
    name:'',//姓名
    phoneNo:'',//手机号
    channelCode:'',//渠道标识
    overDue:'',//是否预期
    orderTime:'',
    createTimeStart:'',
    createTimeEnd:''

      })
  const [list, setList] = useState([])
  const [productName, setProductName] = useState('')//商品名称
  const [name, setName] = useState('')//姓名
  const [phoneNo, setPhoneNo] = useState('')//手机号
  const [channelCode, setChannelCode] = useState('')//渠道标识
  const [orderTime, setOrderTime] = useState([])//下单时间
  const [overDue, setOverDue] = useState('')//是否预期
  const [channelList, setChannelList] = useState([]) //渠道标识下拉
  const styles = {
    spanWidthStyles: {
      width: '70px',
      'text-align-last': 'justify',
      display: 'inline-block'
    },
    formItemStyles: {
      width: '200px'
    }
  }

  const onChangeTime = (date, dateString) => {
    const [createTimeStart, createTimeEnd] = dateString
    if (!createTimeStart) {
      setPageInfo({
        ...pageInfo,
      })
      setOrderTime(null)
    } else {
      // setPageInfo({
      //   ...pageInfo,
      //   createTimeStart,
      //   createTimeEnd
      // })
      setOrderTime([moment(createTimeStart), moment(createTimeEnd)])
    }
  }
 const handleOverDueChange = overDue =>{
   setOverDue(overDue)
  }
  const loadList = async () => {
    try {
      const { data } = await getCountChannelList()
      setChannelList(data)
    } catch (error) {
      message.error(error.message)
    }
    queryRentCount(pageInfo).then(res => {
      setList(res.data.records)
      setTotal(res.data.total)
    })
  }

  useEffect(() => {
    loadList()
  }, [pageInfo])

  const columns = [
    {
      title: '订单号',
      dataIndex: 'orderNo',
      align: 'center'
    },
    {
      title: '商品名称',
      dataIndex: 'productName',
      align: 'center'
    },
    {
      title: '用户名称',
      dataIndex: 'name',
      align: 'center'
    },
    // {
    //   title: '所属渠道',
    //   dataIndex: 'channelCode',
    //   align: 'center'
    // },
    {
      title: '下单时间',
      dataIndex: 'createDate',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'phoneNo',
      align: 'center'
    },
    {
      title: '是否逾期',
      dataIndex: 'overDue',
      align: 'center',
    }
  ]

  const PaginationOptions = {
    current: pageInfo.pageNumber,
    pageSize: pageInfo.pageSize,
    total,
    showTotal: total => {
      return `共${total}条`
    },
    onChange: pageNumber => {
      setPageInfo({ ...pageInfo, pageNumber })
    }
  }
  const handleChange = channelCode => {
    // setPageInfo({
    //   ...pageInfo,
    //   pageNumber: 1,
    //   channelCode
    // })
    setChannelCode(channelCode)
  }
  //查询
  const onSearchBtn = () => {
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      productName,//商品名称
      name,//姓名
      phoneNo,//手机号
      channelCode,//渠道标识
      overDue,//是否预期
      createTimeStart:orderTime.length ? moment(orderTime[0]).format('YYYY-MM-DD 00:00:00') :'',
      createTimeEnd:orderTime.length ? moment(orderTime[1]).format('YYYY-MM-DD 23:59:59'):''
      // createTimeStart:pageInfo.createTimeEnd ? pageInfo.createTimeEnd+' 00:00:00' :"",
      // createTimeEnd:pageInfo.createTimeEnd ?pageInfo.createTimeEnd+' 59:59:59':'',
    })
  }
  const onReset =() =>{
    setPageInfo({ ...pageInfo, pageNumber: 1, pageSize: 10,
      productName:'',//商品名称
      name:'',//姓名
      phoneNo:"",//手机号
      channelCode:'',//渠道标识
      overDue:'',//是否预期
      createTimeStart:'',
      createTimeEnd:''
    })
    setChannelCode('')
    setOrderTime([])
    setProductName('')
    setName('')
    setPhoneNo('')
    setOverDue('')
    setChannelList([])
  }
 const exportRent1 = () =>{
   exportRent({ ...pageInfo, pageNumber: -1, pageSize: -1,
     createTimeStart:orderTime.length ? moment(orderTime[0]).format('YYYY-MM-DD 00:00:00'):'',
     createTimeEnd:orderTime.length ? moment(orderTime[1]).format('YYYY-MM-DD 23:59:59'):'',
     productName,//商品名称
     name,//姓名
     phoneNo,//手机号
     channelCode,//渠道标识
     overDue,//是否预期
   }).then(res => {
     const objectURL = URL.createObjectURL(res)
     const btn = document.createElement('a')
     const body = document.querySelector('body')
     if (body) {
       body.appendChild(btn)
     }
     btn.download = `租赁记录列表.xlsx`
     btn.href = objectURL
     btn.click()
     if (body) {
       body.removeChild(btn) // 删除标签
     }

     message.success('导出成功')
   })
 }
  return (
    <>
      <PageHeaderWrapper title="租赁记录列表">
         <Card style={{ marginBottom: 20 }}>
          <Row gutter={[5, 20]}>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>商品名称：</span>
                <Input
                  style={styles.formItemStyles}
                  placeholder="请输入商品名称"
                  value={productName}
                  onChange={e => setProductName(e.target.value)}
                  allowClear
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>姓名：</span>
                <Input style={styles.formItemStyles} placeholder="请输入姓名"
                       value={name}
                       onChange={e => setName(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>手机号：</span>
                <Input style={styles.formItemStyles} placeholder="请输入手机号"
                       value={phoneNo}
                       onChange={e => setPhoneNo(e.target.value)}
                       allowClear
                />
              </div>
            </Col>
            {/* <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>渠道标识：</span>
                <Select
                    showSearch
                    optionFilterProp="children"
                    filterOption={(input, option) =>
                        option.props.children
                            .toLowerCase()
                            .indexOf(input.toLowerCase()) >= 0
                    }
                    defaultValue={channelCode}
                    value={channelCode}
                    style={{ width: 120 }}
                    onChange={handleChange}
                    allowClear
                >
                  <Option value="">全部</Option>
                  {channelList.map(item => (
                      <Option value={item.channelCode} key={item.channelCode}>
                        {item.channelName}
                      </Option>
                  ))}
                </Select>
              </div>
            </Col> */}
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>下单时间：</span>
                <RangePicker
                  placeholder="请选择"
                  style={styles.formItemStyles}
                  onChange={onChangeTime}
                  value={orderTime}
                />
              </div>
            </Col>
            <Col span={6}>
              <div>
                <span style={styles.spanWidthStyles}>是否逾期：</span>
                <Select
                    style={styles.formItemStyles}
                    placeholder="请选择"
                    onChange={handleOverDueChange}
                    value={overDue}
                    allowClear
                >
                  <Option value="">全部</Option>
                  <Option value="0">是</Option>
                  <Option value="1">否</Option>

                </Select>
              </div>
            </Col>
            <Col span={6}>
              <Button type="primary" onClick={onSearchBtn}>查询</Button>
              <Button type="default" onClick={onReset}>重置</Button>
              <Button type="danger" onClick={exportRent1}>导出</Button>
            </Col>
          </Row>
        </Card>
        <Card>
          <Table
            rowKey="orderNo"
            dataSource={list}
            columns={columns}
            pagination={PaginationOptions}
          />
        </Card>
      </PageHeaderWrapper>
    </>
  )
}

export default Count
